<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商品名称/供应商名称" v-model="keywords"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="virtualcard" align="center" label="会员卡号" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.virtualcard}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" align="center" label="订单号" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="providerCode" align="center" label="供应商编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.providerCode}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="providerShortName" align="center" label="供应商简称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.providerShortName}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="goodsNo" align="center" label="商品编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.goodsNo}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="商品名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>



      <el-table-column prop="barCode" align="center" label="商品条码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.barCode}}</span>
        </template>
      </el-table-column>



      <el-table-column prop="typeCode" align="center" label="类别编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.typeCode}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="typeName" align="center" label="类别名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.typeName}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="points" align="center" label="积分" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.points}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="price" align="center" label="微信" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="totalSaleAmount" align="center" label="销售额(不含税)" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalSaleAmount}}</span>
        </template>
      </el-table-column>



      <el-table-column prop="createTime" align="center" label="下单时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="payTime" align="center" label="支付时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.payTime}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="receiveTime" align="center" label="签收时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.receiveTime}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="订单状态" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.status|orderStatus}}</span>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30, 50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  import baseMixin from "../../mixins/baseMixin";
  let statusMap = ["正常", "冻结"];
  export default {
    mixins: [baseMixin],
    data() {
      return {
        total: 0,
        keywords: '',
        rules: {}
      };
    },
    created() {
      this.init("finance_report/settled_detail", 0).loadData();
    },
    filters: {
      statusFilter(status) {
        return statusMap[parseInt(status)];
      },
      statusTagFilter(status) {
        return ["success", "danger"][parseInt(status)];
      }
    },
    methods: {
      exportExcelFile() {
        this.exportExcel({
          title: "账户管理",
          fields: [{
              field: "username",
              title: "账号名称"
            },
            {
              field: "createTime",
              title: "创建时间"
            },
            {
              field: "roleName",
              title: "角色"
            },
            {
              field: "status",
              title: "状态",
              valueMap: ["正常", "冻结"]
            }
          ]
        }).then(res => {
          if (res.data.errcode == 0) {
            this.openWin(res.data.info);
          } else {
            this.$error(res.data.info);
          }
        });
      }
    }
  };

</script>
